<template>
  <view class="page">
    <u-navbar autoBack :placeholder="true">
      <template #center>
        <u-text align="center" suffixIcon="arrow-down-fill" text="10以内加减法" size="32rpx" color="#333"
          @click="showKnowledgeList = !showKnowledgeList"></u-text>
      </template>
    </u-navbar>
    <view class="main">
      <view class="flex align-center justify-between padding-lr">
        <u-text :text="`本班错误人数：${knowledgeInfo.count}人`" size="28rpx" color="#666"></u-text>
        <u-text align="right" :text="`本班错误率：${knowledgeInfo.mistakeRate}%`" size="28rpx" color="#666"></u-text>
      </view>
      <!-- 学生头像 -->
      <view class="student-list">
        <view class="student-item" v-for="item in 8" :key="item">
          <u-avatar :src="item.avatar" size="120rpx"></u-avatar>
          <u-text margin="12rpx 0 0 0" align="center" text="张三" size="28rpx" color="#333"></u-text>
        </view>
      </view>

      <view class="bg-white radius-lg padding margin-top" v-for="i in 3" :key="i">
        <u-text size="32rpx" color="#333" bold :text="`错题详情${i}-张三`"></u-text>
        <u-image src="/static/image/img-math.png" mode="aspectFit"></u-image>
      </view>
    </view>
    <PopupBox :show="showKnowledgeList" :top="140" @close="showKnowledgeList = false">
      <view class="popup-item" v-for="item in knowledgeList" :key="item.id" @click="handleKnowledgeClick(item)">
        <u-text :text="item.name" size="28rpx" color="#333"></u-text>
        <u-text align="right" :text="item.isTold ? '已讲解' : '未讲解'" size="28rpx" color="#666"></u-text>
      </view>
    </PopupBox>

    <view class="footer">
      <u-button size="large" shape="circle" type="primary" text="已讲解"></u-button>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue';
import PopupBox from '@/components/PopupBox/index.vue';
const knowledgeInfo = ref({
  count: 10,
  mistakeRate: 30
})
const showKnowledgeList = ref(false)
const knowledgeList = ref([
  {
    id: 1,
    name: '10以内加减法',
    isTold: false,
  },
  {
    id: 2,
    name: '20以内加减法',
    isTold: true,
  }
])

const studentList = ref([
  {
    id: 1,
    name: '张三',
    avatar: '/static/image/img-math.png',
  },
  {
    id: 2,
    name: '李四',
    avatar: '/static/image/img-math.png',
  },
  {
    id: 3,
    name: '王五',
    avatar: '/static/image/img-math.png',
  },
])

const handleKnowledgeClick = (item) => {
  // item.isTold = !item.isTold
  showKnowledgeList.value = false
}
</script>
<style scoped lang="scss">
.student-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40rpx;
  margin-top: 40rpx;

  .student-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

.popup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 40rpx;
  background: white;
}
</style>